import { FC, useState } from 'react';
import { Card, Button, Space, notification } from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
} from '@ant-design/icons';

import request from 'umi-request';

const Index: FC = () => {
  const [count, set_count] = useState<number>(0);
  const [finish, set_finish] = useState<boolean>(false);
  const fn = () => {
    set_finish(true);
    request.get('/api/count').then((response) => {
      set_count(response.count);
      set_finish(false);
    });
  };

  const openNotificationWithIcon = (
    type: 'success' | 'info' | 'error' | 'warning',
  ) => {
    notification[type]({
      message: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    });
  };

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="基础按钮">
        <Space>
          <Button type="primary" size="large">
            Primary Button
          </Button>
          <Button>Default Button</Button>
          <Button type="dashed">Dashed Button</Button>
          <Button type="primary" danger>
            Primary
          </Button>
          <Button type="dashed" danger>
            Dashed
          </Button>
          <Button type="primary" disabled>
            Primary(disabled)
          </Button>
        </Space>
      </Card>
      <Card title="图形按钮">
        <Space>
          <Button icon={<PlusOutlined />}>添加</Button>
          <Button icon={<EditOutlined />}>编辑</Button>
          <Button type="primary" icon={<DeleteOutlined />}>
            删除
          </Button>
          <Button type="primary" shape="circle" icon={<SearchOutlined />} />
        </Space>
      </Card>
      <Card title="loading">
        <Space>
          {/* 按钮为loading状态的时候是不可点击的 */}
          {/* 可以用loading来做防抖 */}
          <Button type="primary" onClick={fn} loading={finish}>
            Loading
          </Button>
          <span>{count}</span>
        </Space>
      </Card>
      <Card title="全局通知">
        <Space>
          <Button onClick={() => openNotificationWithIcon('success')}>
            Success
          </Button>
          <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
          <Button onClick={() => openNotificationWithIcon('warning')}>
            Warning
          </Button>
          <Button onClick={() => openNotificationWithIcon('error')}>
            Error
          </Button>
        </Space>
      </Card>
    </Space>
  );
};

export default Index;
